<template>
	<view class="container">
		<!-- 用户介绍及扫码区域 -->
		<view class="top">
			<img src="/static/logo.png" alt="" class="img" />
			<text>尊贵的&nbsp;&nbsp:{{mid}}-{{mname}}\n修车厂欢迎您</text>

			<view class="hexiao">
				<view class="scan" @click="sm">
					<image src="../../static/sm.png" mode="" />
					<text>扫码核销</text>
				</view>
				<view class="input" @click="sr">
					<image src="../../static/wz.png" mode="" />
					<text>输入核销码</text>
				</view>
			</view>
		</view>

		<!-- 功能选择区 -->
		<view class="middle">
			<uni-grid :column="3" :showBorder="false" :square="false" :highlight="false" @change="change">
				<uni-grid-item v-for="(item, index) in list" :index="index" :key="index">
					<view class="grid-item-box">
						<image :src="item.url" class="image" mode="aspectFill" />
						<text class="text">{{ item.text }}</text>
					</view>
				</uni-grid-item>
			</uni-grid>
		</view>

		<!-- 通知列表区域 -->
		<view class="bottom">
			<view class="inform">
				<image src="/static/index10.png" mode="" />
				<view class="tz">
					最新通知
				</view>
				<view class="tzR" @click="toMaintenance">
					今日需上门取车任务共&nbsp;{{orderList.length}}&nbsp;单&nbsp;>>
				</view>
			</view>

			<view class="info">
				<view class="title">
					<view>用户</view>
					<view>服务项目</view>
					<view>预约时间</view>
				</view>
				<view class="infoList" v-for="(item,index) in orderList" :key="index">
					<view class="infoDetil">
						<!-- 
						 username : 用户名
						 serviceProject : 服务项目
						 reservationTime : 预约时间
						 需要跟后端数据对接
						 -->
						<view>{{item.username}}</view>
						<view>{{item.serviceProject}}</view>
						<view>{{item.reservationTime}}</view>
					</view>
				</view>
			</view>


			<view class="outBtn" @click="outOrNot">
				退出登录
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 店铺id
				mid: 0,
				// 修车厂name
				mname: '劳斯莱斯',
				// 展示的订单 最新通知下的列表
				orderList: [],
				// 选择功能列表
				list: [{
						url: '/static/index01.png',
						text: '经营统计',
						badge: '0',
						// type: "primary"
					},
					{
						url: '/static/index02.png',
						text: '核销记录',
						badge: '1',
						// type: "success"
					},
					{
						url: '/static/index03.png',
						text: '收支明细',
						badge: '99',
						// type: "warning"
					},
					{
						url: '/static/index04.png',
						text: '订单管理',
						badge: '2',
						// type: "error"
					},
					{
						url: '/static/index05.png',
						text: '卡券管理'
					},
					{
						url: '/static/index06.png',
						text: '维修任务'
					},
					{
						url: '/static/index07.png',
						text: '评价管理'
					},
					{
						url: '/static/index08.png',
						text: '商户资料'
					},
					{
						url: '/static/index09.png',
						text: '活动发布'
					},
					{
						url: '/static/index11.png',
						text: '救援任务'
					},
					{
						url: "/static/index10.png",
						text: '抢单'
					}
				]

			}
		},
		async onLoad() {
			await this.setMid()//获取修车厂id
			await this.getInfo()//获取最新通知列表
		},
		methods: {
			setMid() {
				// 获取修车厂id
				// return new Promise((resolve) => {
				// 	this.mid = getApp().globalData.userShop.id;
				// 	resolve();
				// });
			},
			async getInfo() {
				uni.request({
					// url: 'http://localhost:8088/business/orders/list',
					url: '对接后端接口去获取列表',
					header: {
						authorization: getApp().globalData.authorization
					},
					data: {
						id: this.mid
					},
					success: res => {
						if (res.statusCode === 200) {
							this.orderList = res.data.rows;
						} else {
							
						}
					},
				})
			},
			// 选择功能
			change(e) {
				let {
					index
				} = e.detail
				this.list[index].badge && this.list[index].badge++

				if (index == 0) {
					uni.navigateTo({
						url: "/pages/operating/operating"
					})
				} else if (index == 1) {
					uni.navigateTo({
						url: "/pages/verification/recoding/recording"
					})
				} else if (index == 2) {
					uni.navigateTo({
						url: "/pages/income/details/details"
					})
				} else if (index == 3) {
					uni.navigateTo({
						url: "/pages/order/orderManger/orderManger"
					})
				} else if (index == 4) {
					uni.navigateTo({
						url: "/pages/coupon/coupon"
					})
				} else if (index == 5) {
					uni.navigateTo({
						url: "/pages/repair/repair"
					})
				} else if (index == 6) {
					uni.navigateTo({
						url: "/pages/evaluate/evaluate"
					})
				} else if (index == 7) {
					uni.navigateTo({
						url: "商户资料的pages"
					})
				} else if (index == 8) {
					uni.navigateTo({
						url: "活动发布的pages"
					})
				} else if (index == 9) {
					uni.navigateTo({
						url: "救援任务的pages"
					})
				}
			},
			
			// 扫码核销
			sm() {
				uni.scanCode({
					onlyFromCamera: true,
					scanType: ['qrCode'],
					success: function (res) {
						// console.log('条码类型：' + res.scanType);
						// console.log('条码内容：' + res.result);
						uni.navigateTo({
							url:"/pages/verification/operate/operate?code="+res.result
						})
					}
				});
			},
			// 输入核销码
			sr() {
			// 取车任务
				uni.navigateTo({
					url: "/pages/verification/operate/operate"
				})
			},
			toMaintenance() {
			// 退出登录
				uni.navigateTo({
					url: '跳转到上门取车任务pages'
				})
			},
			outOrNot() {
				uni.showModal({
					title: '退出登录',
					content: '您确定要退出登录嘛？',
					confirmText: '退出',
					success: (res) => {
						if (res.confirm) {
							// 用户点击了确定按钮，可以在这里执行退出前的操作，例如保存数据等  
							uni.navigateTo({
								url: '确定登录之后跳转到登录pages'
							})
						} else if (res.cancel) {
							// 用户点击了取消按钮，可以在这里执行其他操作，例如返回上一页等
						}
					},
				});
			}
		}
	}
</script>

<style>
	.container {
		font-size: 28rpx;
		line-height: 48rpx;
		height: 100vh;
		background-color: #ffffff;
	}

	/* top */
	.top {
		padding: 40rpx;
		height: 240rpx;
		background-color: #0D7AF7;
		position: relative;
	}

	.top>.img {
		width: 158rpx;
		height: 158rpx;
		line-height: 40rpx;
		border-radius: 200rpx;
	}

	.top>text {
		position: absolute;
		top: 70rpx;
		left: 250rpx;
		width: 300rpx;
		height: 40rpx;
		line-height: 32rpx;
		color: rgb(255, 255, 255);
		font-size: 28rpx;
		text-align: left;
		font-family: SourceHanSansSC-regular;
	}

	.hexiao {
		display: flex;
		position: absolute;
		top: 240rpx;
	}

	.scan,
	.input {
		width: 300rpx;
		border-radius: 16rpx;
		background-color: #ffffff;
		text-align: center;
		height: 100rpx;
		line-height: 90rpx;
		font-size: 28rpx;
		color: #101010;
		border: 1px solid rgba(187, 187, 187, 1);
	}

	.input {
		margin-left: 45rpx;
	}

	.scan {
		margin-left: 10rpx;
	}

	.scan>text {
		vertical-align: middle;
		font-weight: 600;
	}

	.input>text {
		vertical-align: middle;
		font-weight: 600;
	}

	.scan>image {
		height: 55rpx;
		width: 55rpx;
		vertical-align: middle;
		margin-right: 15rpx;
	}

	.input>image {
		height: 55rpx;
		width: 55rpx;
		vertical-align: middle;
		margin-right: 15rpx;
	}

	/* middle */
	.middle {
		padding-top: 50rpx;
	}

	.middle .image {
		width: 50rpx;
		height: 50rpx;
	}

	.middle .text {
		font-size: 28rpx;
		margin-top: 10rpx;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		// display: block;
		/* #endif */
	}

	.grid-dynamic-box {
		margin-bottom: 30rpx;
	}

	.grid-item-box {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 30rpx 0;
	}

	.grid-item-box-row {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		padding: 30rpx 0;
	}

	.grid-dot {
		position: absolute;
		top: 10rpx;
		right: 30rpx;
	}

	.swiper {
		height: 840rpx;
	}

	/* #ifdef H5 */
	@media screen and (min-width: 768px) and (max-width: 1425px) {
		.swiper {
			height: 1260rpx;
		}
	}

	@media screen and (min-width: 1425px) {
		.swiper {
			height: 1660rpx;
		}
	}

	/* #endif */

	/* bottom */
	.bottom {
		position: relative;
	}

	.inform {
		display: flex;
	}

	.inform>image {
		width: 40rpx;
		height: 40rpx;
		margin-left: 60rpx;
	}

	.inform>.tz {
		font-size: 28rpx;
		font-weight: bold;
		margin-left: 10rpx;
	}

	.inform>.tzR {
		font-size: 24rpx;
		margin-left: 120rpx;
		color: #EA1703;
	}

	.info {
		width: 600rpx;
		margin-left: 70rpx;
	}

	.info>.title {
		background-color: #EFEFEF;
	}

	.title,
	.infoDetil {
		font-size: 24rpx;
		display: flex;
	}

	.infoDetil {
		border-top: #BBBBBB 1px solid;
	}

	.title view:nth-child(1),
	.infoDetil view:nth-child(1) {
		padding-left: 20rpx;
	}

	.title view:nth-child(2),
	.infoDetil view:nth-child(2) {
		padding-left: 100rpx;
	}

	.title view:nth-child(3) {
		padding-left: 180rpx;
	}

	.infoDetil view:nth-child(3) {
		padding-left: 85rpx;
	}

	/* 退出登录 */
	.outBtn {
		position: absolute;
		left: 270rpx;
		top: 300rpx;
		background-color: #0D7AF7;
		width: 200rpx;
		height: 70rpx;
		line-height: 70rpx;
		border-radius: 8rpx;
		text-align: center;
		font-size: 30rpx;
		font-family: Roboto;
		color: #ffffff;
	}
</style>